<template>
  <div class="wrapper">
    <use-header title="数据字典" sub-title="设置的大量枚举值和配置，统一标准化管理，随时修改或增加">
      <a-tooltip placement="left" title="刷新字典缓存">
        <a-button type="text" class="icon-only" @click="store.getList(true)">
          <reload-outlined/>
        </a-button>
      </a-tooltip>
    </use-header>
    <a-flex gap="middle">
      <div style="flex:0 0 270px">
        <a-card :body-style="{padding:'8px'}">
          <template #title><database-outlined/> 字典列表</template>
          <a-menu mode="inline" class="border-none" :inlineIndent="12" @click="handleClick">
            <a-menu-item v-for="item in dictionaryList" :key="item.key">
              <container-outlined/>
              {{item.label}}
              <a-tag :bordered="false">{{item.key}}</a-tag>
            </a-menu-item>
          </a-menu>
        </a-card>
      </div>
      <div style="flex:1">
        <a-card>
          <template #title>
            <container-outlined/>
            {{state.currentLabel}} <a-tag :bordered="false">{{state.currentKey}}</a-tag>
            <a-tag :bordered="false">{{store.data.length}}</a-tag>
          </template>
          <a-flex class="margin-bottom" justify="space-between">
            <a-space>
              <a-button type="primary" @click="showModal"><plus-outlined/>新增</a-button>
              <a-dropdown>
                <a-button>批量 <down-outlined class="ant-icon-down"/></a-button>
                <template #overlay>
                  <a-menu @click="handleBatch">
                    <a-menu-item key="on">启用</a-menu-item>
                    <a-menu-item key="off">禁用</a-menu-item>
                    <a-menu-item key="del">删除</a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </a-space>
          </a-flex>
          <use-table :columns="columns"
                   row-key="id"
                   :data-source="store.data"
                   :loading="store.loading"
                   :row-selection="{selectedRowKeys:state.selectKeys,onChange: selectChange}">
            <template #bodyCell="{column,record}">
              <template v-if="column.dataIndex === 'name'">
                <a-tag :color="record.color" v-if="record.color">{{record.name}}</a-tag>
                <span v-else>{{record.name}}</span>
              </template>
              <template v-if="column.dataIndex === 'status'">
                <a-tag :color="record.status === 1 ? 'green' : 'red'">
                  {{record.status === 1 ? '启用' : '禁用'}}
                </a-tag>
              </template>
              <template v-if="column.key === 'action'">
                <div class="table-action">
                  <span @click="showModal(record)"><edit-outlined/>编辑</span>
                  <span class="danger" @click="store.remove(record.id)"><delete-outlined/>删除</span>
                </div>
              </template>
            </template>
          </use-table>
        </a-card>
      </div>
    </a-flex>
    <dictionary-modal v-model:open="state.open"
                      :data-item="state.dataItem"
                      :current="{label:state.currentLabel,key:state.currentKey}"/>
  </div>
</template>

<script setup lang="ts">
import {dictionaryList} from "@/config/dictionary.ts";
import UseHeader from "@/components/UseHeader.vue";
import {onMounted, reactive} from "vue";
import {ContainerOutlined,
  PlusOutlined,DownOutlined,
  EditOutlined,DeleteOutlined,
    ReloadOutlined,
  DatabaseOutlined} from "@ant-design/icons-vue";
import {useDictionaryStore} from "@/store/modules/dictionary.ts";
import DictionaryModal from "@/views/admin/dictionary/components/DictionaryModal.vue";
import UseTable from "@/components/UseTable.vue";
import useMessage from "@/utils/useMessage.ts";
import type {DictionaryType, Key} from "@/types";

const store = useDictionaryStore()
const columns = [
  { title: '名称', dataIndex: 'name'},
  { title: '值', dataIndex: 'value',width: 120},
  { title: '标签样式', dataIndex: 'color',width: 120},
  { title: '排序', dataIndex: 'sort',width: 80},
  { title: '状态', dataIndex: 'status',width: 80},
  { title: '操作', key:'action',width:150},
]
const state = reactive({
  open:false,
  dataItem:{} as DictionaryType | undefined,
  currentLabel:dictionaryList[0]?.label as string || '',
  currentKey: dictionaryList[0]?.key as string || '',
  selectKeys:[] as Key[],
})
const showModal = (item?:DictionaryType) => {
  state.dataItem = item
  state.open = true
}
const selectChange = (key:Key[]) => {
  state.selectKeys = key
}
const handleClick = (e:any) => {
  state.currentLabel = dictionaryList.find(item => item.key === e.key)?.label
  state.currentKey = e.key
  store.getDictionary(e.key)
}
const handleBatch = (e:any) => {
  if(state.selectKeys.length === 0) {
    return useMessage(500,'请选择要操作的分类')
  }
  if(['on','off'].includes(e.key)){
    store.batchUpdate(state.selectKeys as number[],{status:e.key === 'on' ? 1 : 0})
  }else {
    store.batchRemove(state.selectKeys as number[])
  }
}
onMounted(()=> {
  store.getList()
  store.getDictionary(state.currentKey)
})
</script>